{{/* Hugo Blox: CTA Image Paragraph */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}

<div>
  {{ range $idx, $item := $block.content.items }}
  {{ $title := .title | emojify | $page.RenderString }}
  {{ $text := .text | emojify | $page.RenderString }}
  {{ $image_path := path.Join "media" .image }}
  {{ $image := resources.GetMatch $image_path }}
  {{ with $image }}
    {{ $image = $image.Process "Resize 800x webp" }}
  {{ else }}
    {{ errorf "%s uses the `cta-image-paragraph` blox which specifies a non-existent `image` at `assets/%s`. Please add the image to this folder and try again." $page.File.Path $image_path }}
  {{ end }}
  <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
    <img class="w-full" src="{{$image.RelPermalink}}" alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
    <div class="mt-4 md:mt-0">
      <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{$title}}</h2>
      <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">{{$text}}</p>
      {{ $icon := .feature_icon | default "check" }}
      {{ if .features }}
      <ul>
        {{ range .features }}
        <li class="relative mb-4 pl-6">
          {{ partial "functions/get_icon" (dict "name" $icon "attributes" `class="inline-block pr-3" style="height: 1em;"`)  }}
          {{ . | markdownify }}
        </li>
        {{ end }}
      </ul>
      {{ end }}
      {{ with .button }}
      <a href="{{.url}}" class="mt-3 inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
        {{.text}}
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </a>
      {{ end }}
    </div>
  </div>
  {{ end }}
</div>
